<template>
  <el-row class="page" style="text-align: left;">
    <el-tabs value="first">
      <el-tab-pane label="响应信息" name="first" >
        <el-row style="margin-bottom: 10px;">
          <el-col :span="24" v-if="$store.state.requestResponse.status<=205" >
            <el-tag type="success">{{
              $store.state.requestResponse.config.method}}</el-tag>
            <el-tag type="success">{{
              $store.state.requestResponse.status +
                " " +
                $store.state.requestResponse.statusText
            }}</el-tag>

            <el-tag type="success"
              >响应时间 200ms</el-tag
            >
            <el-tag type="info"
              >Body长度:{{ $store.state.requestResponse.request.responseText.length }}</el-tag
            >
          </el-col>
          <el-col :span="24" v-else-if="$store.state.requestResponse.response && $store.state.requestResponse.response.status">
            <el-tag type="success">{{
              $store.state.requestResponse.config.method}}</el-tag>
            <el-tag type="danger">{{
              $store.state.requestResponse.response.status +
                " " +
                $store.state.requestResponse.response.statusText
            }}</el-tag>

            <el-tag type="danger" v-if="$store.state.requestResponse.resTime"
              >响应时间 200ms</el-tag
            >
          </el-col>
          <el-col :span="24" v-else>
            <el-tag type="success">{{
              $store.state.requestResponse.config.method}}</el-tag>
            <el-tag type="danger">{{
              $store.state.requestResponse.code +
                " " +
                $store.state.requestResponse.message
            }}</el-tag>

            <el-tag type="danger" v-if="$store.state.requestResponse.resTime"
              >响应时间 200ms</el-tag
            >
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-collapse accordion v-model="collapseValue">
              <el-collapse-item title="Headers" name="1">
                <el-row
                  v-for="item in Object.keys(
                    $store.state.requestResponse.config.headers
                  )"
                  :key="item"
                >
                  <el-col :span="24">
                    {{
                      item +
                        ": " +
                        $store.state.requestResponse.config.headers[item]
                    }}
                  </el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item title="Body" name="2">
                <el-tabs v-model="bodyTab" v-if="$store.state.requestResponse.status<=205">
                  <el-tab-pane label="Pretty" name="first"
                    >
                    <el-row style="overflow: auto;width: 100%;max-height: 50vh;">
                      <pre>
                      {{ $store.state.requestResponse.data }}
                    </pre>
                    </el-row>
                    </el-tab-pane
                  >
                  <el-tab-pane label="Raw" name="second" >
                    <el-row style="overflow: auto;width: 100%;max-height: 50vh;">
                      <code>
                      {{ $store.state.requestResponse.data }}
                    </code>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane label="Preview" name="third"
                    >
                    <el-row style="overflow: auto;width: 100%;max-height: 50vh;">
                      <div v-html="$store.state.requestResponse.data"></div>
                    </el-row>

                    </el-tab-pane
                  >
                </el-tabs>
                <el-tabs v-model="bodyTab" v-else-if="$store.state.requestResponse.response && $store.state.requestResponse.response.status">
                  <el-tab-pane label="Pretty" name="first"
                    >
                    <el-row style="overflow: auto;width: 100%;max-height: 50vh;">
                      <pre>
                      {{ $store.state.requestResponse.response }}
                    </pre>
                    </el-row>
                    </el-tab-pane
                  >
                  <el-tab-pane label="Raw" name="second" >
                    <el-row style="overflow: auto;width: 100%;max-height: 50vh;">
                      <code>
                        {{ $store.state.requestResponse.response }}
                    </code>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane label="Preview" name="third"
                    >
                    <!-- <code>
                        {{ $store.state.requestResponse.response.data }}
                    </code> -->
                    <div v-html="$store.state.requestResponse.response.data"></div>
                    </el-tab-pane
                  >
                </el-tabs>
                <el-tabs v-model="bodyTab" v-else>
                  <el-tab-pane label="Pretty" name="first"
                    >
                    <el-row style="overflow: auto;width: 100%;max-height: 50vh;">
                      <pre>
                      {{ $store.state.requestResponse.message }}
                    </pre>
                    </el-row>
                    </el-tab-pane
                  >
                  <el-tab-pane label="Raw" name="second" >
                    <el-row style="overflow: auto;width: 100%;max-height: 50vh;">
                      <code>
                        {{ $store.state.requestResponse.message }}
                    </code>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane label="Preview" name="third"
                    >
                    <!-- <code>
                        {{ $store.state.requestResponse.response.data }}
                    </code> -->
                    <div v-html="$store.state.requestResponse.message"></div>
                    </el-tab-pane
                  >
                </el-tabs>
              </el-collapse-item>
            </el-collapse>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      bodyTab: "first",
      collapseValue:'2'
    };
  },
  components: {},
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {}
};
</script>

<style scoped>
.page {
  padding: 0 20px;
}
</style>
